import React from 'react'
import Code from './Code'
import Switch from '../ui-components/switch'
import style from './style'
import cx from 'classnames'

export default class extends React.Component {
  state = {
    value: 1
  }

  handleClick() {
    setTimeout(() => {
      this.setState({
        value: this.state.value === 1?0: 1
      })
    }, 200)
  }

  render() { 
    return (
      <div className={cx({
        [style.root]: true
      })}>
        <Code>{'<Switch disabled l={..} r={..} onChange={..} on/>'}</Code>
        <div>
          <Switch value={this.state.value} onClick={::this.handleClick} pair='选填|必填'/>
        </div>
        <div>
          <Switch value={this.state.value} onClick={::this.handleClick} pair='选填|必填'/>
        </div>
        <div>
          <Switch disabled pair='选填|必填'/>
        </div>
        <div>
          <Switch 
            value={this.state.value} simple />
        </div>
      </div>
    )
  }
}
